<template lang="pug">
.pano-loading(v-if="getLoadingImage", :style="{backgroundColor: getLoadStyle}")
  .countdown.hand(@click="handleJump" v-if="!isH5Loading")
    span(v-if='isstartsceneThree') 进入全景
    span(v-else) 跳过 {{ count>0?count:'' }}
  .loading-wrap.tac(ref="loadingWrap" v-if="!isH5Loading")
    img(:src="getLoadingImage", ref="loadImg", @load="loadImage")


  .countdown.hand(@click="handleJump" v-if="isH5Loading" style="transform: translateZ(1px);")
    span 跳过
  .loading-iframe.tac(v-if="isH5Loading" :style="isViewType ? 'transform:rotate(90deg);': ''")
    iframe(:src="getLoadingImage" :style="styleObj")
</template>

<script>
import { mapGetters } from 'vuex'
import { isPc } from '@/utils'

export default {
  props: {
    pagetype: {
      type: String,
      defualt: 'panoview'
    }
  },
  data() {
    return {
      H5_VIEW_PREFIX: $globalconfig.URLS.H5_VIEW_PREFIX,
      isShow: true,
      count: 5, // 默认5秒
      timer: null,
      styleObj: {
        border: 0,
        width: '100%',
        height: document.documentElement.clientHeight + 'px'
      }
    }
  },
  beforeMount() {
    if (this.loadInfo && this.loadInfo.load_type == 1) {
      return
    }
    let vw = document.documentElement.clientWidth
    let vh = document.documentElement.clientHeight
    let img = new Image()
    img.onload = () => {
      let loadWrap = this.$refs.loadingWrap
      if (!loadWrap) return
      loadWrap.style.position = 'absolute'

      if ($globalconfig.MODULES.IS_HAINAN_PROGRAM_OPEN) {
        // 705定制 IS_HAINAN_PROGRAM_OPEN
        if(img.src && img.src.indexOf('.gif') === -1) {
          loadWrap.style.width = vw + 'px'
          loadWrap.style.height = vh + 'px'

          this.$refs.loadImg.width = vw
          this.$refs.loadImg.height = vh

          if(this.pagetype == 'overview') {
            loadWrap.style.left = (vh - vw)/2 + 'px'
            loadWrap.style.top = -(vh - vw)/2 + 'px'
            loadWrap.style.transform = 'rotate(-90deg)'
          }
        } else {
          loadWrap.style.left = '50%'
          loadWrap.style.top = '50%'
          loadWrap.style.transform = 'translate(-50%, -50%)'
        }
      } else {
        if(img.height >= vh && img.width >= vw) {
          loadWrap.style.width = vw + 'px'
          loadWrap.style.height = vh + 'px'

          this.$refs.loadImg.width = vw
          this.$refs.loadImg.height = vh

          if(this.pagetype == 'overview') {
            loadWrap.style.left = (vh - vw)/2 + 'px'
            loadWrap.style.top = -(vh - vw)/2 + 'px'
            loadWrap.style.transform = 'rotate(-90deg)'
          }
        } else {
          loadWrap.style.left = '50%'
          loadWrap.style.top = '50%'
          loadWrap.style.transform = 'translate(-50%, -50%)'
        }
      }
    }
    img.src = this.getLoadingImage
  },
  mounted() {
    if (this.loadInfo && this.loadInfo.load_type == 0) {
      this.countdown()
    }
  },
  computed: {
    ...mapGetters(['loadInfo', 'ovvData', 'handdrawData', 'panoInfo']),
    // 是否是旋转效果
    isstartsceneThree() {
      if (this.panoInfo && this.panoInfo.isstartscene == 3) {
        return true
      }
      return false
    },
    // 判断横屏竖屏
    isViewType() {
      if (isPc()) {
        return false
      } else {
        if (this.ovvData) {
          if (this.ovvData.view_type == 0) {
            return true
          }
        }
        if (this.handdrawData) {
          if (this.handdrawData.view_type == 0) {
            return true
          }
        }
      }
      return false
    },
    isMobileDevice() {
      return isPc() ? false : true
    },
    getLoadStyle() {
      if (this.loadInfo && this.loadInfo.load_type == 1) {
        return '#ffffff'
      } else {
        return (this.loadInfo && this.loadInfo.background_color) ? this.loadInfo.background_color  : 'rgba(0,0,0,0)'
      }
    },
    isH5Loading() {
      if (this.loadInfo && this.loadInfo.load_type == 1) {
        return true
      }
      return false
    },
    getLoadingImage() {
      // 需要loading的页面
      if(this.loadInfo && (this.$route.name == 'Home' || this.$route.name == 'Overview' || this.$route.name == 'Tourview' || this.$route.name == 'Handdraw' || this.$route.name == 'Goods' || this.$route.name == 'Works')) {
        if ($globalconfig.setLoadIngOnce) {
          $globalconfig.setLoadIngOnce = false
          if (this.loadInfo.load_type == 1) {
            return `${this.H5_VIEW_PREFIX + this.loadInfo.fk_userpano_load_id}&direc=1`
          } else if (this.loadInfo.load_type == 0) {
            return isPc() ? this.loadInfo.pc_load_img : this.loadInfo.load_img
          }
        }
      }
      return false
    }
  },
  methods: {
    loadImage() {
      this.$refs.loadImg.style.opacity = 1
    },
    countdown() {
      this.count = this.loadInfo.showtime / 1000
      if (this.count > 0) {
        this.timer = setInterval(() => {
          this.count--
          if(this.count <= 0) {
            this.jumpBtn = false
            this.handleJump()
          }
        }, 1000)
      }
    },
    handleJump() {
      clearInterval(this.timer)
      this.$emit('closeLoading')
      this.$vgo.emit('loadFinish')
      this.timer = null
      this.isShow = false
    }
  }
}
</script>

<style lang="stylus">
@import '../../assets/styles/mixin.styl'

.pano-loading
  full-cover()
  z-index: 10000
  transform: translateZ(1px)
  .countdown
    position: absolute
    right: 20px
    top: 20px
    z-index: 2
    span
      display: block
      border: 1px solid #fff
      border-radius: 15px
      padding: 0 20px
      color: #fff
      background-color: rgba(0, 0, 0, .5)
      line-height: 30px
      font-size: 14px
      background-color: rgba(0, 0, 0, .5)
  .loading-wrap
    // pos-center()
    img
      opacity 0
      transition opacity 0.5s
</style>
